import React, { useState } from 'react';
import { Card, Form, Input, Button, message } from 'antd';
import { UserOutlined, LockOutlined, MailOutlined } from '@ant-design/icons';
import './Login.css'; // 引入样式文件
import { login, register } from '../api/user-api';

const Login = ({ handleLogin }) => {
  const [isRegistering, setIsRegistering] = useState(false);
  
  const onFinishLogin = (values) => {
    console.log('Received values of form: ', values);
    login(values).then(
      resp=>{
        console.log("resp", resp)
        const {status, data} = resp
        if(status != 200){
          message.error(data);
        }else{
          window.localStorage.setItem("token", data)
          message.success("登录成功")
          handleLogin(true)
        }
      },
      error=>{
        message.error("登录失败，用户名或密码错误")
      }
    )
  };

  const onFinishRegister = (values) => {
    console.log('Received values of form: ', values);
    register(values).then(
      resp=>{
        const {status, data} = resp
        if(status){
          message.success("用户注册成功");
        }
      },
      resp=>{
        message.error("注册失败,用户名已存在")
      }
    )
  };

  return (
    <div className="login-page">
      <Card title={isRegistering ? "注册" : "登录"} className="login-card">
        {isRegistering ? (
          <Form
            name="register"
            className="login-form"
            initialValues={{ remember: true }}
            onFinish={onFinishRegister}
          >
            <Form.Item
              name="username"
              rules={[{ required: true, message: '用户名不能为空' }]}
            >
              <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[{ required: true, message: '密码不能为空' }]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="Password"
              />
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" className="login-form-button">
                注册
              </Button>
              Or <a onClick={() => setIsRegistering(false)}>登录</a>
            </Form.Item>
          </Form>
        ) : (
          <Form
            name="normal_login"
            className="login-form"
            initialValues={{ remember: true }}
            onFinish={onFinishLogin}
          >
            <Form.Item
              name="username"
              rules={[{ required: true, message: '用户名不能为空' }]}
            >
              <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[{ required: true, message: '密码不能为空' }]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="Password"
              />
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" className="login-form-button">
                登录
              </Button>
              Or <a onClick={() => setIsRegistering(true)}>注册</a>
            </Form.Item>
          </Form>
        )}
      </Card>
    </div>
  );
};

export default Login;
